<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>B站:chenxuyun</title>

		<style>
			body {
				background-color: aliceblue;
				/* 弹性布局 */
				display: flex;
				justify-content: center;
			}

			.bigBox {
				max-width: 1300px;
				/* 设置5列显示 */
				column-count: 5;
				/* 规定列间的间隔为 15 像素： */
				column-gap: 15px;
			}

			.image {
				margin-bottom: 15px;
			}

			.image img {
				width: 100%;
			}

			/* 判断设备宽度，当最大宽度为1200px时，显示4列 */
			@media (max-width:1200px) {
				.bigBox {
					column-count: 4;
				}
			}
			
			/* 当最大宽度为850px时，显示3列  */ 
			@media (max-width:850px) {
				.bigBox {
					column-count: 3;
				}
			}
			/* 当最大宽度为600px时，显示2列   */ 
			@media (max-width:600px) {
				.bigBox {
					column-count: 2;
				}
			}
		</style>

	</head>
	<body>
		<div class="bigBox">
			<div class="image"><img src="img/1.jpg" alt=""></div>
			<div class="image"><img src="img/2.jpg" alt=""></div>
			<div class="image"><img src="img/3.jpg" alt=""></div>
			<div class="image"><img src="img/4.jpg" alt=""></div>
			<div class="image"><img src="img/5.jpg" alt=""></div>
			<div class="image"><img src="img/6.jpg" alt=""></div>
			<div class="image"><img src="img/7.jpg" alt=""></div>
			<div class="image"><img src="img/8.jpg" alt=""></div>
			<div class="image"><img src="img/9.jpg" alt=""></div>
			<div class="image"><img src="img/10.jpg" alt=""></div>
			<div class="image"><img src="img/11.jpg" alt=""></div>
			<div class="image"><img src="img/12.jpg" alt=""></div>
			<div class="image"><img src="img/13.jpg" alt=""></div>
			<div class="image"><img src="img/14.jpg" alt=""></div>
			<div class="image"><img src="img/15.jpg" alt=""></div>
			<div class="image"><img src="img/16.jpg" alt=""></div>
			<div class="image"><img src="img/17.jpg" alt=""></div>
			<div class="image"><img src="img/18.jpg" alt=""></div>
			<div class="image"><img src="img/19.jpg" alt=""></div>
			<div class="image"><img src="img/20.jpg" alt=""></div>
			<div class="image"><img src="img/21.jpg" alt=""></div>
			<div class="image"><img src="img/22.jpg" alt=""></div>
			<div class="image"><img src="img/23.jpg" alt=""></div>
			<div class="image"><img src="img/24.jpg" alt=""></div>
			<div class="image"><img src="img/25.jpg" alt=""></div>
			<div class="image"><img src="img/26.jpg" alt=""></div>
			<div class="image"><img src="img/27.jpg" alt=""></div>
			<div class="image"><img src="img/28.jpg" alt=""></div>
			<div class="image"><img src="img/29.jpg" alt=""></div>
			<div class="image"><img src="img/30.jpg" alt=""></div>
		</div>
		
		<!--瀑布流布局作用
		 1、因为瀑布流有吸引力，瀑布流会在它的页面底部给你不断地加载新的暗示信息，滑动的时候会不停的出现新的东西，
		 通过给出不完整的视觉图片去吸引你的好奇心，让你停不下来想要不断的向下探索。采用这种方案的产品，
		 往往可以通过瀑布流加强用户的停留时间，提高用户的使用粘度。
		 
		 2、用户一扫而过的快速阅读模式，短时间内可以看到大量的信息，
		 瀑布流的懒加载模式，又避免点击的的翻页操作，在最小的操作成本下能够获得最多的内容体验，
		 瀑布流的视觉方式，让人容易沉浸其中，不容易被打断。
		 
		 3、另外瀑布流的主要特质就是：定宽而不定高，这样的页面设计区别于传统的矩阵式图片布局模式，
		 巧妙的利用视觉层级，视线的任意流动来缓解视觉的疲劳。 -->
		
	</body>
</html>
